<template>
  <view class="upform">
    <up-form
      labelPosition="left"
      :model="modelForm"
      :rules="modelForm.rules"
      ref="formRef"
    >
      <up-form-item prop="userInfo.phone">
        <view class="userInfo-phone">
          <text>手机号码</text>
          <view class="phone-input">
            <up-input
              prefixIcon="phone"
              cursorColor="red"
              :border="false"
              :prefixIconStyle="prefixIconStyle"
              size="large"
              :customStyle="customStyle"
              placeholder="请输入手机号"
              v-model="modelForm.userInfo.phone"
            ></up-input>
            <view class="wrap">
              <up-toast ref="uToastRef"></up-toast>
              <up-code
                :seconds="60"
                @end="end"
                @start="start"
                ref="uCodeRef"
                @change="codeChange"
              ></up-code>
              <up-button
                color="#0066ff"
                :disabled="disabled"
                :customStyle="{
                  height: '30px',
                  borderRadius: '8px',
                }"
                @tap="getCode"
                >{{ tips }}</up-button
              >
            </view>
          </view>
        </view>
      </up-form-item>
      <up-form-item prop="userInfo.code">
        <view class="userInfo-phone">
          <text>验证码</text>
          <view class="phone-input">
            <up-input
              cursorColor="red"
              :border="false"
              :prefixIconStyle="prefixIconStyle"
              :customStyle="customStyle"
              placeholder="请输入验证码"
              v-model="modelForm.userInfo.code"
            ></up-input>
          </view>
        </view>
      </up-form-item>
      <up-form-item prop="userInfo.password">
        <view class="userInfo-phone">
          <text>密码</text>
          <view class="phone-input">
            <up-input
              prefixIcon="lock"
              size="large"
              :border="false"
              :customStyle="customStyle"
              :prefixIconStyle="prefixIconStyle"
              placeholder="请设置新密码（6-16为字符）"
              :password="true"
              v-model="modelForm.userInfo.password"
            ></up-input>
          </view>
        </view>
      </up-form-item>
    </up-form>
    <up-button
      type="primary"
      :customStyle="{
        height: '40px',
        borderRadius: '6px',
        marginTop: '10px',
      }"
      color="#1989fa"
      @click="submit"
      text="确认修改"
    ></up-button>
  </view>
</template>
<script setup lang="ts">
const formRef = ref<any>(null);
const disabled = ref<any>(false);
const modelForm = ref<any>({
  userInfo: {
    mobile: "",
    password: "",
  },
  rules: {
    "userInfo.phone": {
      type: "string",
      required: true,
      message: "请输入手机号码",
      trigger: ["blur", "change"],
    },
    "userInfo.code": {
      type: "string",
      required: true,
      message: "请输入验证码",
      trigger: ["blur", "change"],
    },
    "userInfo.password": {
      type: "string",
      required: true,
      message: "请输入密码",
      trigger: ["blur", "change"],
    },
  },
});
const customStyle = ref<any>({
  height: "30px",
});
const prefixIconStyle = ref<any>({
  fontSize: "25px",
  color: "#9ca3af",
});
const count = ref<any>(0);
const tips = ref("");
const uCodeRef = ref<any>(null);
const codeChange = (text: any) => {
  console.log("text", text);
  tips.value = text;
};

const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    setTimeout(() => {
      uni.hideLoading();
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast("验证码已发送");
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start();
    }, 2000);
  } else {
    uni.$u.toast("倒计时结束后再发送");
  }
};

const end = () => {
  disabled.value = false;
};

const start = () => {
  count.value = 0;
  disabled.value = true;
};

const submit = () => {
  formRef.value
    .validate()
    .then((valid: any) => {
      if (valid) {
        uni.$u.toast("校验通过");
        uni.navigateTo({
          url: `/pages/logon/logon`,
        });
      } else {
        uni.$u.toast("校验失败");
      }
    })
    .catch(() => {
      // 处理验证错误
      uni.$u.toast("校验失败");
    });
};
</script>
<style lang="scss" scoped>
.upform {
  padding: 20px;
  .userInfo-phone {
    display: flex;
    flex-direction: column;
    width: 100%;
    text {
      margin-bottom: 5px;
    }
    .phone-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f5f5f5;
      border-radius: 4px;
      padding: 2px 10px;
    }
  }
}
</style>
